<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022-05-29
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>库存统计</title>
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body" >
        <div id="main" style="width: 800px;height: 600px;margin: 50px auto"> </div>
    </div>
</div>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script src="static/js/echarts.js"></script>

<script type="text/javascript">

    layui.use(['table', 'echarts', 'jquery','element'], function() {
        var element = layui.element,
            $ = layui.jquery,
            echarts = layui.echarts,
            table = layui.table;
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        $.post('/sum/SumStock',function (res) {
            option = {
                title: {
                    text: '库存数量',
                    left: 'center'
                },
                color: ['#0e72cc  ','#6ca30f  ','#f59311  ','#fa4343  ','#16afcc  ',
                    '#85c021  ','#d12a6a  ','#0e72cc  ','#6ca30f  ','#f59311  ',
                    '#fa4343  ','#16afcc'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '8%'
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: [70, 200],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data:eval(res)
                    }
                ]
            };
            option && myChart.setOption(option);
        })
    })
</script>
</body>
</html>